<script setup lang="ts">
const expanded = defineModel<boolean>('value', { default: false });
</script>

<template>
  <div class="expansion-switch absolute inset-0 flex cursor-pointer items-center justify-center" @click="expanded = !expanded">
    <i class="i-ion:chevron-down-outline transition-all" :class="{ 'rotate-180': expanded }" />
  </div>
</template>
